
const Demo1 = () => {
  return (
    <>
      <h3>学习React其实还是有点难度的</h3>
      <h4>首先要学会JSX语法</h4>
    </>
  );
}

export default Demo1;


/**
 *  1.JSX只能返回一个根元素
 *    如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来,可以使用<></>
 *    被称作 Fragment. React Fragment 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。
 *  2.标签必须闭合，单标签必须自闭合：<img/>,<input/>,<hr/>等，双标签：<h1></h1>,<div></div>,<span></span>
 *  3.使用驼峰命名给大部分属性命名，如需要用strokeWidth代替stroke-width。在React中，需要用className来代替，DOM中的class属性。
 *  4.如果需要动态指定DOM中属性值，可以使用{}
 *       const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
 *       JSX中：
 *           <img src={avatar} />
 *  5.{}中任何JavaScript表达式都能正常运行，
 *    {}使用场景：
 *              +用作JSX标签内的文本： <h1>hello,{name}!</h1>
 *              +用作紧跟在=符号后的属性：<img src={avatar} />
 *  6.使用”双大括号“：JSX中的CSS和对象
 *    +行内样式：React 不要求你使用内联样式（使用 CSS 类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给style 属性传递一个对象
 *              <ul style={{
                      backgroundColor: 'black', //內联样式的双单词属性也需要驼峰命名法
                      color: 'pink'
                    }}>
                </ul>
      +对象：你可以将多个表达式合并到一个对象中，在JSX的大括号内分别使用它们：
            const person = {
              name: 'Gregorio Y. Zara',
              theme: {
                      backgroundColor: 'black',
                      color: 'pink'
                      }
                          };
            在JSX中：<h1 style={person.theme}>{person.name}'s Todo</h1>
 */
